(function () {
  let hotData = [
    {
      city: '北京', // 城市
      sales: '25, 179', // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: '可爱多', num: '9,086', flag: true },
        { name: '娃哈哈', num: '8,341', flag: true },
        { name: '喜之郎', num: '7,407', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '6,724', flag: false },
        { name: '好多鱼', num: '2,170', flag: true },
      ],
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '3,457', flag: false },
        { name: '娃哈哈', num: '2,124', flag: true },
        { name: '喜之郎', num: '8,907', flag: false },
        { name: '八喜', num: '6,080', flag: true },
        { name: '小洋人', num: '1,724', flag: false },
        { name: '好多鱼', num: '1,170', flag: false },
      ],
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '2,345', flag: true },
        { name: '娃哈哈', num: '7,109', flag: true },
        { name: '喜之郎', num: '3,701', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '2,724', flag: false },
        { name: '好多鱼', num: '2,998', flag: true },
      ],
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '2,156', flag: false },
        { name: '娃哈哈', num: '2,456', flag: true },
        { name: '喜之郎', num: '9,737', flag: true },
        { name: '八喜', num: '2,080', flag: true },
        { name: '小洋人', num: '8,724', flag: true },
        { name: '好多鱼', num: '1,770', flag: false },
      ],
    },
    {
      city: '山东',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '9,567', flag: true },
        { name: '娃哈哈', num: '2,345', flag: false },
        { name: '喜之郎', num: '9,037', flag: false },
        { name: '八喜', num: '1,080', flag: true },
        { name: '小洋人', num: '4,724', flag: false },
        { name: '好多鱼', num: '9,999', flag: true },
      ],
    },
  ];
  hotData.forEach(function (value, index) {
    let hotsale = `<li class="${index === 0 ? 'active' : ''}">
        <span>${value.city}</span>
        <span>${value.sales} <s class="${
      value.flag ? 'icon-up' : 'icon-down'
    }"></s></span>
        </li>`;
    $('.sup').append(hotsale);
  });
  //   hotData[0].brands.forEach(function (value) {
  //     let monthData = `<li><span>${value.name}</span><span>${
  //       value.num
  //     } <s class="${value.flag ? 'icon-up' : 'icon-down'}"></s></span></li>`;
  //     $('.sub').append(monthData);
  //   });
  fz(0);

  $('.top .sup li')
    .on('mouseenter', function () {
      nowIndex = $(this).index();
      clearInterval(timer);
      $(this).addClass('active').siblings().removeClass('active');
      // let index = $(this).index();
      //   $('.sub').empty();
      //   hotData[nowIndex].brands.forEach(function (value) {
      //     let monthData = `<li><span>${value.name}</span><span>${
      //       value.num
      //     } <s class="${value.flag ? 'icon-up' : 'icon-down'}"></s></span></li>`;
      //     $('.sub').append(monthData);
      //   });
      fz(nowIndex);
    })
    .on('mouseleave', function () {
      load();
    });

  let timer;
  let nowIndex = 0;
  function load() {
    timer = setInterval(function () {
      nowIndex++;
      if (nowIndex == $('.top .sup li').length) {
        nowIndex = 0;
      }
      $('.top .sup li')
        .eq(nowIndex)
        .addClass('active')
        .siblings()
        .removeClass('active');
      //   $('.sub').empty();
      //   hotData[nowIndex].brands.forEach(function (value) {
      //     let monthData = `<li><span>${value.name}</span><span>${
      //       value.num
      //     } <s class="${value.flag ? 'icon-up' : 'icon-down'}"></s></span></li>`;
      //     $('.sub').append(monthData);
      //   });
      fz(nowIndex);
    }, 2000);
  }
  load();
  function fz(nowIndex) {
    $('.sub').empty();
    hotData[nowIndex].brands.forEach(function (value) {
      let monthData = `<li><span>${value.name}</span><span>${
        value.num
      } <s class="${value.flag ? 'icon-up' : 'icon-down'}"></s></span></li>`;
      $('.sub').append(monthData);
    });
  }
})();
